<template>
<div class="approvals">
<el-card>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
    <Table
    :tableData='tableData'
     width='100%'
   :tableColum='tableColum'
    :multipleSelection='multipleSelection'
   @rowoperation='rowoperation'
   @handleSelectionChange='handleSelectionChange'
   @switchChang='switchChang'
    ></Table>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  
  </el-tabs>

</el-card>
<!-- 查看对话框 -->
<el-dialog
  :title='tag'
  class="my-dialog-name"
  :visible.sync="checkdialogVisible"
  
  width="50%"
  :before-close="handleClose">
   <div class="leave">
  <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
  <div><h4>{{checkData.username}}</h4>
  <p>部门：{{checkData.departmentName}}</p>
   <p>入职时间： {{checkData.timeOfEntry  | dateFormat}}</p> 
   <!-- <pre>{{procData.start_time}}</pre> -->
   <div>

  
  <el-form label-width="80px" class="f" >
   <el-form-item label="请假类型" v-if="procData.processName" >
    <el-input v-model="procData.processName" disabled></el-input>
  </el-form-item>
  <!-- applyUnit -->
   <el-form-item label="请假形式" v-if="procData.applyUnit" >
    <el-input v-model="procData.applyUnit" disabled></el-input>
  </el-form-item>
   <el-form-item label="开始时间" v-if="procData.start_time" >
    <el-input v-model="procData.start_time" disabled></el-input>
  </el-form-item>
  
 
  <el-form-item label="结束时间" v-if="procData.end_time" >
    <el-input v-model="procData.end_time" disabled></el-input>
  </el-form-item>
   <el-form-item label="原因" v-if="procData.reason" >
     <el-input type="textarea" v-model="procData.reason" disabled></el-input>
  </el-form-item>
  </el-form>

   </div>
  </div>
 
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="checkdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkdialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>
import {definition,process,startProcess} from '@/api/http'
import Table from '@/components/global/table.vue'
  export default {
    data() {
      return {
        activeName: 'first',
        tableData:[],
          tableColum:[{
        prop:'processName',
        lable:'审批类型',

      },
     
      {
        prop:'username',
        lable:'申请人',
      

      },
       {
        prop:'procCurrNodeUserName',
        lable:'当前审批人',
      

      },
       {
        prop:'timeOfEntry',
        lable:'申请时间',
        type:'Data'
      

      },
       
       {
        
        prop:'processState',
        lable:'申请状态',
        type:'change'
      

      },
   
 {
  lable:'操作',
  type:'opt',
  size:'mini',
  operations:[{
    label:'查看',
    method:'check',
    type:'primary'
  },
  {
    label:'通过',
    method:'formal',
    type:'primary'

  },
  {
    label:'驳回',
    method:'transfer',
    type:'primary'
  },
 
]
 },



      ],
      checkdialogVisible: false,
      tag:'',
      checkData:[],
      procData:[],
      apply:{
        days:1,
        departmentId:'',
        departmentName:'',
        procApplyTime:'',
        procCurrNodeUserId:'',
        procCurrNodeUserName:'',
        procData:'',
        procEndTime:'',
        processDefinitionId:'',
        processId:'',
        processKey:'',
        processName:'',
        processState:'',
        timeOfEntry:'',
        userId:'',
        username:''

      },
      };
      
    },
    components:{Table},
    methods: {
         // 操作按钮
  async  rowoperation(row,method){
      console.log('父组件',row,method)
      if(method==='check'){
        this.checkdialogVisible = true
        this.tag = row.processName
        this.checkData = row
        this.procData = JSON.parse(row.procData) //转化为json
       console.log('转换',JSON.parse(row.procData))
      }
      // 通过
      this.EditId = row.id
       if(method==='formal'){
        console.log('formal')
        this.apply.departmentId = row.departmentId
        // this.apply.days = row.departmentId
        // this.apply.days = 

       let procData  =   console.log(JSON.parse(row.procData))

       
      //  const res = await startProcess()
       }
      //  驳回
       if(method==='transfer'){
        console.log('transfer')
       }

    },
      handleClick(tab, event) {
        console.log(tab, event);
      },
  async    getdefinition(){
        const {data:res} = await definition()
        console.log('getdefinition',res)
    //   this.tableData =  res.data
      },
    async    getprocess(){
        const {data:res} = await process()
        console.log('getprocess',res)
      this.tableData =  res.data.rows
      },
   async   pass(row){
        const res = await startProcess()
      },
    },
    created() {
        this.getprocess()
    //    this.getdefinition()
    },
  };
</script>

<style lang="less" >


.el-main{
    background-color: #fff;
}

.el-tabs__content{
    min-height: 500px;
}
.my-dialog-name{ 
    .el-dialog__header{ 
      text-align: left;
      background-color: #1482f0;
      border-bottom: 1px solid #e8eaec;
      .el-dialog__body {
      }
      .el-dialog__footer {
        text-align: center;
      }
       .el-dialog__title,.el-dialog__headerbtn i{
      color: white;
    }

    }
  }
  .leave{
padding: 20px;
display: flex;
align-items: center;
img{
    width: 100px;
    height: 100px;
}
h4, p{
    padding: 10px 20px;
}
}
.f{
    margin-top: 20px;
}
</style>